<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单练习</title>
</head>
<link href="css/public.css" type="text/css" rel="stylesheet">
<link href="css/styleform.css" type="text/css" rel="stylesheet">
<body>
    <div class="box">
        <div class="context">
            <form name="myform" action="sucsess.html">
                <h3>学院信息登记表</h3>
                <label for="" class="user"><span>用户登录名:</span>
                    <input type="text" readonly value="宋东亭666" required>&nbsp;(不能修改,只能查看)
                </label>
                <label for="" class="label"><span>真实姓名:</span>
                    <input id="trueName" type="text" placeholder="例如:宋东亭" required pattern="[\u4e00-\u9fa5]{2,}">&nbsp;(必须填写,只能输入汉字)
                </label>
                <label for="" class="label"><span>真实年龄:</span>
                    <input id="age" type="range" min="10" name="myage" oninput="myput.value=this.value"><output name="myput" for="myage">&nbsp;</output>
                </label>
                <label for="" class="label"><span>出生日期:</span>
                    <input id="brdate" type="date">(必须填写)
                </label>
                <label for="" class="label"><span>电子邮箱:</span>
                    <input id="email" type="email" required pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">&nbsp;(必须填写)
                </label>
                <label for="" class="label"><span>身份证号:</span>
                    <input required pattern="([0-9]){17}(0-9|x|X)?">&nbsp;(必须填写,能够以数字和字母x结尾的短身份证号)</label>
                <label for="" class="label"><span>手机号码:</span>
                    <input id="phone" type="tel" required pattern="(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}">&nbsp;(必须填写)</label>
                <label for="" class="label"><span>个人主页:</span>
                    <input id="theme" type="text" list="themeList">
                    <datalist id="themeList">
                        <option value="http:\\www.baidu.com"></option>
                        <option value="http:\\www.baidu666.com"></option>
                        <option value="http:\\www.baidu777.com"></option>
                    </datalist>
                  (请选择网址)
                </label>
                <label for="" class="label"><span>幸运颜色:</span><input class="inp" id="color" type="color">&nbsp;(请选择你喜欢的颜色)</label>
                <input class="btn" type="submit" name="mySubbtn" value="提交">
                <input class="btn" type="reset" value="重置">
            </form>
        </div>
    </div>
    <script>
        document.myform.mySubbtn.addEventListener("click",function () {
            alert("你正在提交表单biubiubiu~");
            var trueName = document.getElementById("trueName");
            var age = document.getElementById("age");
            var email = document.getElementById("email");
            var phone = document.getElementById("phone");
            if (!trueName.checkValidity()){
                console.info("test")
                trueName.setCustomValidity("姓名必须为汉字且长度不能小于2位!")
            }
            if (!age.checkValidity()){
                age.setCustomValidity("年龄范围为10~99岁!")
            }
            if (!email.checkValidity()){
                email.setCustomValidity("请输入正确的邮箱地址!")
            }
            if (!phone.checkValidity()){
                phone.setCustomValidity("请输入正确的电话号码!")
            }
        })
    </script>


</body>
</html>